<script setup>
import {ref,computed} from 'vue';

let props = defineProps({
  selectedStars: {
    type: Number,
    default: 0
  },
  totalStars: {
    type: Number,
    default: 5
  }
})

let emit = defineEmits(["update:selectedStars"])

let stars = ref(props.totalStars);
let currentSelectedStars = ref(props.selectedStars);

function mouseoverHandle(i) {
  currentSelectedStars.value = i;
  emit("update:selectedStars", i);
}

</script>

<template>
  <span v-for="i in currentSelectedStars" @mouseover="mouseoverHandle(i)">★</span>
  <span v-for="j in (stars - currentSelectedStars)" @mouseover="mouseoverHandle(j + currentSelectedStars)">☆</span>
</template>

<style scoped>
span {
  font-size: 20pt;
  letter-spacing: 10px;
  font-family: "宋体", "Times New Roman", Times, serif;
  cursor: pointer;
}
</style>